<template>
	<view class="body">
		<view class="goods">
			<view class="img">
				<image :src="goods.imgUrl"></image>
			</view>
			<view class="message">
				<view style="font-size: 32rpx;color: black;">{{goods.goodsName}}</view>
				<view>价格: ￥{{goods.price}}</view>
				<view>库存: {{goods.number}}</view>
				<view>已售: {{goods.sold}}</view>
			</view>
		</view>
		<view class="numberAndPrice">
			<view>
				<view class="numberLabel">数量</view>
				<u-number-box :min="1" :max="goods.number" v-model="number"></u-number-box>
			</view>
			<view>
				<view class="totalPriceLabel">总价</view>
				<view class="totalPrice">￥{{totalPrice}}</view>
			</view>
		</view>
		<view class="userAddress">
			<view class="title">收货地址</view>
			<Address class="address" :item="address" :origin="2"></Address>
		</view>
		<view class="userDiscountList">
			<view class="userDiscount" v-for="(item,index) in userDiscount" :key="item.id">
				<view class="top">
					×{{item.number}}
				</view>
				<view class="center">
					<view>
						<image
							src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/discount.png"
							class="tagImg"></image>
					</view>
					<view class="price">
						减免￥{{item.price}}
					</view>
					<u-number-box :min="0" :max="item.number" v-model="useCounts[index]"></u-number-box>
				</view>
			</view>
		</view>
		<button class="buyBtn" @click="submit">提交订单</button>
		<image
			src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/cart4.png"
			class="cart" @click="pushCart"></image>
	</view>
</template>

<script>
	import Address from '@/components/Address.vue'
	export default {
		components: {
			Address
		},
		data() {
			return {
				//用户使用各优惠卷的数量
				useCounts: [],
				//获取的用户折扣卷
				userDiscount: [],
				address: {},
				goods: {},
				number: 1,
				// totalPrice: 0,
				points: 0,
				//折扣百分比数值
				discount: 95,
				cartGoodsList: []
			}
		},
		onLoad(data) {
			this.goods.id = data.id;
			this.getGoodsInfo(data.id);
		},
		onShow() {
			this.cartGoodsList = uni.getStorageSync('cartGoodsList') || [];
			this.getUserDiscount();
			//从收货地址界面回来，获取选中的地址信息
			let pages = getCurrentPages();
			if (pages[pages.length - 1].$vm.address.id) {
				this.address = pages[pages.length - 1].$vm.address
			} else {
				this.getUserDefaultAddress()
			}
		},
		computed: {
			//总折扣
			totalDiscount() {
				let res = 0;
				for (let i = 0; i < this.userDiscount.length; i++) {
					let price = this.userDiscount[i].price;
					let number = this.useCounts[i];
					res += price * number;
				}
				return res;
			},
			//总价格
			totalPrice() {
				let res = 0;
				res += this.goods.price * this.number;
				res -= this.totalDiscount;
				return res < 0 ? 0 : res;
			},
			//使用的折扣卷列表
			discountList() {
				//使用了的折扣信息
				const discountList = []
				for (let i = 0; i < this.useCounts.length; i++) {
					if (this.useCounts[i] > 0) {
						discountList.push({
							discountId: this.userDiscount[i].id,
							number: this.useCounts[i]
						})
					}
				}
				return discountList;
			},
			//商品信息
			orderGoodsInfo() {
				return {
					totalPrice: this.totalPrice,
					goodsId: this.goods.id,
					goodsName: this.goods.goodsName,
					goodsImgUrl: this.goods.imgUrl,
					goodsPrice: this.goods.price,
					goodsNumber: this.number,
					discountPrice: this.totalDiscount,
					totalPrice: this.totalPrice,
					discountList: this.discountList
				}
			}
		},
		methods: {
			//获取用户该商品的优惠卷
			async getUserDiscount() {
				const res = await this.$myRequest({
					url: `shop/applet/getUserDiscount/${this.goods.id}`
				})
				if (res && res.code === 0) {
					this.userDiscount = res.data
					for (let i = 0; i < this.userDiscount.length; i++) {
						this.useCounts.push(0)
					}
					//计算当前可用折扣卷，减去购物车中使用的
					if (this.userDiscount.length == 0 || this.cartGoodsList.length == 0) {
						return;
					}
					this.cartGoodsList.forEach(item => {
						if (item.goodsId == this.goods.id) {
							item.discountList.forEach(item2 => {
								console.log(item2)
								for (let i = 0; i < this.userDiscount.length; i++) {
									if (item2.discountId == this.userDiscount[i].id) {
										this.userDiscount[i].number -= item2.number;
									}
								}
							})
							return;
						}
					})
				}
			},
			async getGoodsInfo(id) {
				const res = await this.$myRequest({
					url: 'shop/goods/info/' + id,
					method: 'get',
				})
				if (res && res.code === 0) {
					this.goods = res.goods
				}
			},
			async getUserDefaultAddress() {
				const res = await this.$myRequest({
					url: 'user/applet/getUserDefaultAddress'
				})
				if (res && res.code === 0) {
					this.address = res.data || {};
				}
			},
			submit() {
				if (!this.address.name) {
					uni.showToast({
						title: '请先设置收货地址',
						icon: 'none'
					})
					return;
				}
				uni.showModal({
					title: '确定要提交订单吗',
					cancelText: '取消',
					confirmText: '确定',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							this.addOrder()
						}
					}
				})
			},
			async addOrder() {
				//分解收货地址信息
				const addressInfo = this.address.address.split(' ');
				const res = await this.$myRequest({
					url: 'order/dispatchOrder/submitDispatchOrder',
					method: 'post',
					data: {
						totalPrice: this.totalPrice,
						name: this.address.name,
						phone: this.address.phone,
						province: addressInfo[0],
						city: addressInfo[1],
						region: addressInfo[2],
						detail: addressInfo[3],
						orderGoodsInfoList: [this.orderGoodsInfo]
					}
				})
				if (res && res.code === 0) {
					uni.showModal({
						title: '订单提交成功',
						cancelText: '晚点支付',
						confirmText: '立即支付',
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/order/order'
								})
							}
						}
					})
				}
			},
			//添加商品到购物车
			pushCart() {
				uni.showModal({
					title: '确定要添加到购物车吗',
					cancelText: '取消',
					confirmText: '立即添加',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							this.cartGoodsList.push(this.orderGoodsInfo)
							uni.setStorageSync('cartGoodsList', this.cartGoodsList);
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100rpx;
		background-color: #F8F8F8;
	}

	.goods {
		border-radius: 20rpx;
		background-color: #ffffff;
		width: 95%;
		height: 20%;
		margin: 5rpx;
		display: flex;

		.img {
			margin: 10rpx;
			height: 200rpx;
			width: 200rpx;
			border-radius: 10px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.message {
			margin: 10rpx;
			font-size: 30rpx;
			color: #8a8a8a;
		}
	}

	.numberAndPrice {
		margin-top: 30rpx;
		width: 95%;
		background-color: #ffffff;
		border-radius: 20rpx;

		view {
			margin: 10rpx 0 10rpx 10rpx;
			display: flex;

			.numberLabel {
				margin: 20rpx;
				width: 350rpx;
			}

			.totalPriceLabel {
				width: 400rpx;
			}

			.totalPrice {
				text-align: center;
			}
		}
	}

	.userAddress {
		margin: 20rpx 20rpx 0 20rpx;
		background-color: white;
		border-radius: 10px;

		.title {
			font-size: 40rpx;
			color: #FFB300;
			font-weight: 600;
			text-align: center;
		}
	}


	.userDiscount {
		margin-top: 20rpx;
		width: 700rpx;
		border-radius: 10px;
		height: 180rpx;
		background-color: white;

		.top {
			color: #FFB300;
			font-weight: 600;
			height: 60rpx;
			text-align: center;
			font-size: 45rpx;
		}

		.center {
			width: 680rpx;
			margin: 5rpx 10rpx 10rpx 10rpx;
			display: flex;

			.tagImg {
				width: 150rpx;
				height: 100rpx;
				margin: 0 20rpx 0 10rpx;
			}

			.price {
				width: 500rpx;
				text-align: center;
				font-size: 45rpx;
				height: 100rpx;
				line-height: 100rpx;
				color: #FFB300;
			}

			.operation {
				display: flex;

				image {
					width: 80rpx;
					height: 80rpx;
					margin: 0 10rpx 0 10rpx;
				}
			}

		}

		.addDiscount {
			width: 300rpx;
			margin: 0;
			font-size: 40rpx;
			background-color: #FFB300;
			color: white;
			border-radius: 10px;
			font-weight: 600;
		}
	}


	.buyBtn {
		position: fixed;
		bottom: 20rpx;
		width: 400rpx;
		height: 100rpx;
		background-color: #FFB300;
		color: white;
		line-height: 100rpx;
	}

	.cart {
		position: fixed;
		bottom: 30rpx;
		right: 40rpx;
		height: 90rpx;
		width: 90rpx;
	}
</style>
